<template>
  <div>
    <div class="updatewrap">
      <div class="headPhoto">
        <span>头像</span>
        <el-upload class="avatar-uploader"
                   :action="this.$aimPath+'/updateSelfImg'"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload"
                   :data="{U_LoginID : updateForm.U_LoginID}">
          <img v-if="selfInfo.u_HeadPortrait"
               :src="selfInfo.u_HeadPortrait"
               class="avatar">
        </el-upload>
      </div>

      <el-form ref="form"
               :model="updateForm"
               label-width="80px"
               size="mini">
        <el-form-item label="账号">
          <el-input v-model="updateForm.U_LoginID"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="updateForm.U_NickName"
                    clearable
                    maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="updateForm.U_Name"
                    clearable
                    maxlength="5"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="updateForm.U_Age"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="updateForm.U_Password"
                    show-password
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="签名">
          <el-input v-model="updateForm.U_Signature"
                    clearable
                    maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="updateForm.U_Sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>

        </el-form-item>
        <el-form-item label="生日">
          <el-col :span="20">
            <el-date-picker type="date"
                            placeholder="选择日期"
                            v-model="updateForm.U_Birthday"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="updateForm.U_Telephone"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="updateForm.U_Email"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="updateForm.U_Intro"
                    :autosize="{maxRows: 2}"
                    clearable
                    maxlength="100"
                    type="textarea"></el-input>
        </el-form-item>
        <el-form-item class="btnSubmit">
          <el-button type="primary"
                     @click="onSubmit">修改</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  name: 'UpdateSelfInfo',
  created () {
    this.selfInfo = JSON.parse(window.sessionStorage.getItem('selfInfoall'))
    this.updateForm.U_LoginID = this.selfInfo.u_LoginID
    this.updateForm.U_NickName = this.selfInfo.u_NickName
    this.updateForm.U_Password = this.selfInfo.u_Password
    this.updateForm.U_Signature = this.selfInfo.u_Signature
    this.updateForm.U_Sex = this.selfInfo.u_Sex
    this.updateForm.U_Birthday = this.selfInfo.u_Birthday
    this.updateForm.U_Telephone = this.selfInfo.u_Telephone
    this.updateForm.U_Name = this.selfInfo.u_Name
    this.updateForm.U_Intro = this.selfInfo.u_Intro
    this.updateForm.U_Age = this.selfInfo.u_Age
    this.updateForm.U_Email = this.selfInfo.u_Email
  },
  data () {
    return {
      updateForm: {
        U_LoginID: '',
        U_NickName: '',
        U_Password: '',
        U_Signature: '',
        U_Sex: '',
        U_Birthday: '',
        U_Telephone: '',
        U_Name: '',
        U_Email: '',
        U_Intro: '',
        U_Age: ''
      },
      selfInfo: {}
    }
  },
  methods: {
    onSubmit () {
      var qs = require('qs')
      this.$http.post('updateSelf', qs.stringify(this.updateForm))
        .then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          else {
            return this.$message.success(res.msg)
          }
        })
    },
    handleAvatarSuccess (res, file) {
      this.selfInfo.u_HeadPortrait = URL.createObjectURL(file.raw)
      console.log(this.selfInfo)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="less" scoped>
.el-form-item--mini.el-form-item {
  margin-bottom: 0;
}
.updatewrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.btnSubmit {
  margin-top: 20px;
  float: right;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.headPhoto {
  margin-left: 40px;
  height: 100px;
  span {
    float: left;
    font-size: 14px;
    color: #606266;
    font-family: "微软雅黑";
  }
  .avatar-uploader {
    float: left;
    margin-left: 66px;
  }
}
</style>
